<template>
  <div>
    <HeaderNav :title="$t('m.headernav.EDITUSERINFO')" :showBack="true" />
    <router-link to="/addPhoto" class="edituserinfo_li_container">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">{{$t('m.msg.HEADERPHOTO')}}</div>
      </div>
      <div class="edituserinfo_header">
        <img :src="userInfo.httpAvatar" class="edituserinfo_img" />
        <van-icon name="arrow" color="#9EA0A0"/>
      </div>
    </router-link>
    <div class="edituserinfo_li_container">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">{{$t('m.msg.MSG59')}}</div>
        <input :placeholder="$t('m.msg.MSG64')" style='width: 175px;' v-model="userInfo.name" />
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div>
    <div class="edituserinfo_li_container">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">{{$t('m.msg.COUNTRY')}}</div>
        <input :placeholder="$t('m.msg.MSG83')" maxlength='15' style='width: 175px;' v-model="userInfo.country" />
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div>
     <div class="edituserinfo_li_container">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">{{$t('m.msg.MSG60')}}</div>
        <input :placeholder="$t('m.msg.MSG65')" style='width: 175px;' v-model="userInfo.mail" />
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div>
    <div class="edituserinfo_li_container">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">{{$t('m.msg.MSG61')}}</div>
        <textarea maxlength='100' style='width: 175px;' :placeholder="$t('m.msg.MSG66')" v-model="userInfo.autograph" ></textarea>
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div>
    <div class="edituserinfo_li_container" @click="showPopup(1)">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">{{$t('m.msg.MSG62')}}</div>
        <div v-if='userInfo.like == "secrecy"'>{{$t('m.msg.SECRET')}}</div>
        <div v-if='userInfo.like == "homosexual"'>{{$t('m.msg.MSG67')}}</div>
        <div v-if='userInfo.like == "oppositeSex"'>{{$t('m.msg.MSG68')}}</div>
        <div v-if='userInfo.like == "bisexual"'>{{$t('m.msg.MSG69')}}</div>
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div>
    <div class="edituserinfo_li_container" @click="showPopup(2)">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">{{$t('m.msg.MSG63')}}</div>
        <div v-if='userInfo.emotionalState == "secrecy"'>{{$t('m.msg.SECRET')}}</div>
        <div v-if='userInfo.emotionalState == "single"'>{{$t('m.msg.MSG70')}}</div>
        <div v-if='userInfo.emotionalState == "bePassionatelyInLove"'>{{$t('m.msg.MSG71')}}</div>
        <div v-if='userInfo.emotionalState == "married"'>{{$t('m.msg.MSG72')}}</div>
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div>
    <div class="edituserinfo_li_container">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">{{$t('m.msg.MSG73')}}</div>
        <input type='number' :placeholder="$t('m.msg.MSG74')" style='width: 175px;' v-model="userInfo.income" />
        <!-- <div>{{userInfo.income}}</div> -->
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div>
    <div class="edituserinfo_li_container">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">{{$t('m.msg.MSG75')}}</div>
        <input type='number' :placeholder="$t('m.msg.MSG76')" style='width: 175px;' v-model="userInfo.weight" />
        <!-- <div>{{userInfo.weight}}</div> -->
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div>
    <div class="edituserinfo_li_container">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">{{$t('m.msg.MSG77')}}</div>
        <input type='number' :placeholder="$t('m.msg.MSG78')" style='width: 175px;' v-model="userInfo.height" />
        <!-- <div>{{userInfo.height}}</div> -->
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div>

    <!-- <div class="edituserinfo_li_container">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">性别</div>
        <div>11</div>
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div>
     <div class="edituserinfo_li_container" @click="showPopup(0)">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">生日</div>
        <div>{{userInfo.}}</div>
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div> 
    <div class="edituserinfo_li_container" @click="showPopup(1)">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">语言</div>
        <div>11</div>
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div>
    
    <div class="edituserinfo_li_container" @click="showPopup(4)">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">教育</div>
        <div>11</div>
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div>
    <div class="edituserinfo_li_container">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">工作</div>
        <div></div>
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div>
    
   
   
    <div class="edituserinfo_li_container">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">国家</div>
        <div>11</div>
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div>
    <div class="edituserinfo_li_container">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">城市</div>
        <div>11</div>
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div>
    <div class="edituserinfo_li_container">
      <div class="edituserinfo_li_left">
        <div class="edituserinfo_li_title">关于自己</div>
        <div>11</div>
      </div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </div> -->
    <div class="edituserinfo_btn" @click='save'>{{$t('m.msg.MSG79')}}</div>
    <!-- <Footer /> -->
    <!-- 选择弹框 -->
    <van-popup
      closeable
      v-model="show"
      position="bottom"
      :style="{ height: '40%' }"
      get-container='body'
    >
    <!-- 选择时间 -->
    <van-datetime-picker 
      v-if="showIndex == 0"
      type="date" 
      :min-date="minDate" 
      :max-date="maxDate"
      :formatter="formatter"
      @cancel="cancel()"
      @confirm="confirm()"
    />
    <!-- 其他选择 -->
    <van-picker v-else 
      show-toolbar
      @cancel="cancel"
      @confirm="confirm"
      :columns="columns" />
    </van-popup>
  </div>
</template>

<script>
import {
    Popup,
    Picker,
    DatetimePicker,
    Icon,
    Field
    
} from 'vant';
import HeaderNav from '@/components/HeaderNav.vue'
import Footer from '@/components/Footer.vue'
import {getUser} from '@/api/session';
import {postQuery, getQuery} from '@/api/query';
import {setUser} from '@/api/session';
export default {
  name: 'editUserInfo',
  components: {
      [Popup.name]: Popup,
      [Picker.name]: Picker,
      [Icon.name]: Icon,
      [Field.name]: Field,
      [DatetimePicker.name]: DatetimePicker,
      HeaderNav,
      Footer
  },
  data(){
    return {
      userInfo:{},
      flag: true,
      active: 3,
      show: false,
      showIndex: 0,
      minDate: new Date(1990,1,1),
      maxDate: new Date(),
      currentDate: new Date(),
      columns: [],
      sexList: ['secrecy','homosexual','oppositeSex','bisexual'],
      loveList:['secrecy','single','bePassionatelyInLove','married']
      
    }
  },
  methods: {
    save(){
      let that = this;
      postQuery('/member/update/info', that.userInfo)
        .then (res => {
          console.log(res)
          if(res.code == 200){
            that.$toast.success(that.$i18n.t('m.msg.MSG4'));
            setUser(null, 3); //修改完成更新缓存数据
          }else{
            that.$toast.fail(res.msg);
          }
      })
    },
    showPopup(index){
      let that = this;
      that.show = true;
      that.showIndex = index;
      //加载选择列
      if(index > 0){
        that.setPickerDate(index);
      }
    },
    //根据不同选择栏赋值数据
    setPickerDate(index){
      let that = this;
      switch (index) {
        // case 1:
        //   that.columns = ['保密','中文','英文'];
        //   break;
        // case 2:
        //   that.columns = ['保密','不足40 kg(88 pounds)','41-50 kg(90-110 pounds)',
        //                   '61-70 kg(133-155 pounds)','71-80 kg(156-176 pounds)',
        //                   '81-90 kg(177-199 pounds)','91-100 kg(200-220 pounds)',
        //                   '超过100 kg(220 pounds)'];
        //   break;
        // case 3:
        //   that.columns = ["保密","不足150 cm(5'0","151-160 cm(5'0",
        //                   "161-170 cm(5'2","171-180 cm(5'6",
        //                   "181-190 cm(5'9","超过191 cm(6'2"];
        //   break;
        // case 4:
        //   that.columns = ['保密','中小学','专科/技校','学院/大学','更高学位'];
        //   break;
        // case 5:
        //   that.columns = ['保密','不足$30,000','$30,000-$45,000',
        //                   '$45,000-$60,000','$60,000-$75,000',
        //                   '$75,000-$150,000','超过$150,000'];
        //   break;
        case 1:
          // that.columns = ['保密','同性','异性','双性恋'];
          that.columns = [that.$i18n.t('m.msg.SECRET'),that.$i18n.t('m.msg.MSG67'),
          that.$i18n.t('m.msg.MSG68'),that.$i18n.t('m.msg.MSG69')];
          break;
        case 2:
          // that.columns = ['保密','单身','热恋','已婚'];
          that.columns = [that.$i18n.t('m.msg.SECRET'),that.$i18n.t('m.msg.MSG70'),
          that.$i18n.t('m.msg.MSG71'),that.$i18n.t('m.msg.MSG72')];
          break;
      }
    },
    //隐藏弹框
    cancel(){
      this.show = false;
    },
    //改变选择的值
    confirm(value, index){
      let that = this;
      if(that.showIndex == 1){
        that.userInfo.like = that.sexList[index]
      }else{
        that.userInfo.emotionalState = that.loveList[index]
      }
      that.show = false;
    },
    formatter(type, value) {
  　　if (type === 'year') {
    　　return `${value}年`;
  　　} else if (type === 'month') {
  　　  return `${value}月`
  　　} else if (type === 'day') {
    　　return `${value}日`
  　　} 
  　　return value;
　　}
    // onChange(picker, value, index) {
    //   Toast(`当前值：${value}, 当前索引：${index}`);
    // }

  },
  created: function() {
    this.userInfo = getUser();
  }
}
</script>
<style scoped>
  .edituserinfo_container{
    background-color: #E6FEFE;
    /* height: 92vh; */
    width: 100%;
    padding-bottom: 5vh;
  }

  .edituserinfo_img{
    height: 90px;
    width: 90px;
  }

  .edituserinfo_header{
    display: flex;
    height: 100%;
		align-items: center;
  }

  .edituserinfo_li_container{
    display: flex;
    height: 8vh;
    padding: 0px 40px;
    font-size: 28px;
    align-items: center;
    justify-content: space-between;
  }

  .edituserinfo_li_left{
    display: flex;
  }

  .edituserinfo_li_title{
    color: #666666;
    width: 25vw;
  }

  .edituserinfo_btn{
    height: 120px;
    width: 90vw;
    margin: 5vh 0 0 5vw;
    background-color: #01D2FF;
    color: white;
    font-size: 42px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
